<template>
  <div>
    <h3>自定义规则</h3>
    <el-table :data="rules" border style="width: 100%">
      <el-table-column prop="name" label="规则名称" width="180"></el-table-column>
      <el-table-column prop="condition" label="条件"></el-table-column>
      <el-table-column prop="action" label="动作" width="100"></el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="editRule(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="deleteRule(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" size="small" @click="addRule">新增规则</el-button>
  </div>
</template>

<script>
export default {
  props: {
    siteId: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      rules: [
        { id: 1, name: '规则A', condition: 'IP 地址匹配', action: '阻止' },
        { id: 2, name: '规则B', condition: 'URL 匹配', action: '记录日志' }
      ]
    };
  },
  methods: {
    addRule() {
      this.$alert('新增规则功能待实现', '提示', {
        confirmButtonText: '确定'
      });
    },
    editRule(rule) {
      this.$alert(`编辑规则 ${rule.name}`, '提示', {
        confirmButtonText: '确定'
      });
    },
    deleteRule(rule) {
      this.$confirm(`此操作将永久删除规则 ${rule.name}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.rules = this.rules.filter(r => r.id !== rule.id);
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }
};
</script>

<style scoped lang="scss">
h3 {
  margin-bottom: 20px;
}
</style>
